<template>
  <div class="index-ChartAlarmDeal">
    <div class="index-module-header-mini index-ChartAlarmDeal-title-box">
      <div class="index-module-title" style="color: white;">其他折线图</div>
      <div class="index-ChartAlarmDeal-title-right">
        <!-- <div class="index-ChartAlarmDeal-title-right-list" v-for="(item, index) of titleList" :key="index"
          :class="{ activeTitleClass: titleActive === index }" @click="titleBtn(index)">
          {{ item }}
        </div> 隐藏的右上方按钮组-->
      </div>
    </div>
    <div ref="chartRef" class="index-ChartAlarmDeal-chart"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();

const chartRef = ref(null);
let mapChart = null;

const titleActive = ref(0);
const titleList = ["当周", "当月", "当年"];

const titleBtn = (index) => {
  titleActive.value = index;
};

// 数据
let xLabel = ["5", "6", "7", "8", "9", "10", "11"];
let goToSchool = ["40", "60", "22", "85", "50", "40", "45"];
let goOutSchool = ["20", "50", "12", "65", "30", "60", "50"];
let goOutSchools = ["50", "65", "20", "12", "50", "22", "54"];

let series = [
  {
    name: "报警处置",
    type: "line",
    showAllSymbol: true,
    symbol: "circle",
    symbolSize: 8, // 默认是空心圆（中间是白色的），改成实心圆s
    smooth: false,
    color: "#D84C4CFF", // 线条颜色
    tooltip: {
      show: true,
    },
    lineStyle: {
      width: 2,
      color: "#D84C4CFF", // 线条颜色
      borderColor: "rgba(0,0,0,.4)",
    },
    itemStyle: {
      color: "rgba(0,0,0,0)", //拐点颜色
      borderColor: "#D84C4CFF", //拐点边框颜色
      borderWidth: 2, //拐点边框大小
    },
    data: goToSchool,
  },
  {
    name: "故障处置",
    type: "line",
    showAllSymbol: true,
    symbol: "circle",
    symbolSize: 8, // 默认是空心圆（中间是白色的），改成实心圆s
    smooth: false,
    color: "#D8984CFF", // 线条颜色
    lineStyle: {
      width: 2,
      color: "#D8984CFF", // 线条颜色
      borderColor: "rgba(0,0,0,.4)",
    },
    itemStyle: {
      color: "rgba(0,0,0,0)", //拐点颜色
      borderColor: "#D8984CFF", //拐点边框颜色
      borderWidth: 2, //拐点边框大小
    },
    tooltip: {
      show: true,
    },

    data: goOutSchools,
  },
  {
    name: "离线处置",
    type: "line",
    showAllSymbol: true,
    symbol: "circle",
    symbolSize: 8, // 默认是空心圆（中间是白色的），改成实心圆s
    smooth: false,
    color: "#727272FF", // 线条颜色
    itemStyle: {
      color: "rgba(0,0,0,0)", //拐点颜色
      borderColor: "#727272FF", //拐点边框颜色
      borderWidth: 2, //拐点边框大小
    },
    lineStyle: {
      width: 2,
      color: "#727272FF", // 线条颜色
      borderColor: "rgba(0,0,0,.4)",
    },
    tooltip: {
      show: true,
    },
    data: goOutSchool,
  },
];

let option = {
  tooltip: {
    show: true,
    trigger: "axis",
    confine: true,
    extraCssText: "padding: 0;border: none;",
    formatter: function (params) {
      // console.log(789, params);
      let tooltipHtml = `<div class="index-ChartAlarmDeal-tooltip">
                      <div class="index-ChartAlarmDeal-tooltip-title">${params[0].name}</div>
                      <div class="index-ChartAlarmDeal-tooltip-list">
                        <div class="index-ChartAlarmDeal-tooltip-list-key"><span class="index-ChartAlarmDeal-tooltip-marker" style="background: #D84C4CFF"></span>${params[0].seriesName}</div>
                        <div class="index-ChartAlarmDeal-tooltip-list-value">${params[0].value}%</div>
                      </div>
                      <div class="index-ChartAlarmDeal-tooltip-list">
                        <div class="index-ChartAlarmDeal-tooltip-list-key"><span class="index-ChartAlarmDeal-tooltip-marker" style="background: #D8984CFF"></span>${params[1].seriesName}</div>
                        <div class="index-ChartAlarmDeal-tooltip-list-value">${params[1].value}%</div>
                      </div>
                      <div class="index-ChartAlarmDeal-tooltip-list">
                        <div class="index-ChartAlarmDeal-tooltip-list-key"><span class="index-ChartAlarmDeal-tooltip-marker" style="background: #727272FF"></span>${params[2].seriesName}</div>
                        <div class="index-ChartAlarmDeal-tooltip-list-value">${params[2].value}%</div>
                      </div>
                    </div>`;

      return tooltipHtml;
    },
    textStyle: {
      color: "#fff",
    },
    tooltip: {
      position: ["20%", "5%"],
    },
  },
  grid: {
    top: "10%",
    bottom: "2%",
    left: "0%",
    right: "5%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#7C6951",
        },
      },
      axisTick: {
        alignWithLabel: true,
      },
      axisLabel: {
        color: "#C2AA90FF",
        fontSize: 10,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#192a44",
        },
      },
      axisTick: {
        show: true,
      },
      data: ["5月", "6月", "7月", "8月", "9月", "10月", "11月"],
    },
  ],
  yAxis: [
    {
      type: "value",
      min: 0,
      max: 100,
      axisLabel: {
        formatter: "{value}",
        color: "#C2AA90FF",
      },
      axisLine: {
        lineStyle: {
          color: "#C2AA90FF",
          fontSize: 10,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(207,166,114,0.4)",
        },
      },
    },
  ],
  series: series,
};

const resizeHandler = () => {
  mapChart.resize();
};
const renderMap = () => {
  if (!mapChart) {
    mapChart = echarts.init(chartRef.value, null, {
      renderer: "svg",
    });
  }
  mapChart.dispatchAction({
    type: "restore",
  });
  mapChart.setOption(option);
  let i = 0;
  setInterval(() => {
    if (i > 7) {
      i = 0;
    }
    mapChart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: i,
    });
    i++;
  }, 3000);
  mapChart.dispatchAction({ type: "dataZoom", start: 0, end: 100 });
};
onMounted(() => {
  renderMap();
  window.addEventListener("resize", resizeHandler);
});
onUnmounted(() => {
  clearInterval(setInterval)
  window.removeEventListener("resize", resizeHandler);
});
</script>

<style lang="scss">
.index-ChartAlarmDeal {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  flex-direction: column;
  background: rgba(98, 81, 55, 0.1);

  .index-ChartAlarmDeal-title-box {
    position: relative;
  }

  .index-ChartAlarmDeal-title-right {
    width: 110px;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    z-index: 2;

    .index-ChartAlarmDeal-title-right-list {
      font-size: 12px;
      color: #7b99a5;
      cursor: pointer;
    }

    .activeTitleClass {
      color: #22eefc;
      position: relative;

      &::before {
        position: absolute;
        left: 0;
        bottom: 0px;
        content: "";
        width: 100%;
        height: 1px;
        background: #22eefc;
      }
    }
  }

  .index-ChartAlarmDeal-chart {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    // border: 1px solid red;
  }

  .index-ChartAlarmDeal-tooltip {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1c1711 0%, #18150f 100%);
    box-shadow: 0px 2px 8px 0px rgba(235, 94, 18, 0.09);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #dda862;
    padding: 6px 10px;

    .index-ChartAlarmDeal-tooltip-title {
      font-weight: 600;
      font-size: 14px;
      color: #ecf8ff;
    }

    .index-ChartAlarmDeal-tooltip-list {
      display: flex;
      align-items: baseline;
      justify-content: space-between;

      .index-ChartAlarmDeal-tooltip-list-key {
        white-space: nowrap;
        font-size: 12px;
        color: rgba(236, 248, 255, 0.8);
      }

      .index-ChartAlarmDeal-tooltip-list-value {
        white-space: nowrap;
        margin-left: 30px;
        text-align: right;
        font-weight: 600;
        font-size: 12px;
        color: rgba(236, 248, 255, 0.8);
      }

      .index-ChartAlarmDeal-tooltip-marker {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
      }
    }
  }
}
</style>
